<template>
	<view class="order-list" :class="themeName">

		<view class="query-line flex row-between">
			<view class="flex" @click="chooseType">
				<text>{{type_desc}}筛选</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
			<view class="flex" @click="chooseTime">
				<text>时间筛选</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
		</view>

		<view class="query-line flex row-between" v-if="time.value == 'diy'">
			<view class="date" @click="showTimeVisible=true">{{formModel.start_desc}}</view>
			<view class="line"></view>
			<view class="date" @click="showTimeVisible=true">{{formModel.end_desc}}</view>
		</view>

		<view class="query-line flex row-between">
			<view class="date">合计数量：{{extend.goods_num}}</view>
			<view class="date">合计金额：{{extend.total_price}}</view>
		</view>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: '暂无数据~',
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order-contain">
					<view class="order" v-for="item,idx in reportList" :key="idx ">
						<!-- Order Header -->
						<view class="order-header">
							<view class="box flex row-between">
								<view>订单编号</view>
								<view>{{item.sn}}</view>
							</view>
							<view class="box flex row-between">
								<view>商品编号</view>
								<view>{{item.code}}</view>
							</view>
							<view class="box flex row-between">
								<view>商品名称</view>
								<view>{{item.goods_name}}</view>
							</view>
						</view>

						<view class="order-main">
							<view class="box flex row-between">
								<view>数量</view>
								<view>{{item.goods_num}}</view>
							</view>
							<view class="box flex row-between">
								<view>金额</view>
								<view>{{item.total_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="time-box">
				<view class="time-header">时间</view>
				<view class="time-main">
					<view :class="time.value == 'week'?'selected time-sel':' time-sel'" @click="queryTime('week','本周')">
						本周</view>
					<view :class="time.value == 'month'?'selected time-sel':' time-sel'"
						@click="queryTime('month','本月')">本月</view>
					<view :class="time.value == 'year'?'selected time-sel':' time-sel'" @click="queryTime('year','本年')">
						本年</view>
					<view :class="time.value == 'diy'?'selected time-sel':' time-sel'" @click="queryTime('diy','自定义')">
						自定义</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="time-footer">
					<button hover-class="none" class="btn btn--cancel" size="md" @tap="showVisible=false">取消</button>
				</view>
			</view>
		</u-popup>

		<u-select v-model="showTypeVisible" :confirm-color="themeColor" cancel-color="#999" @confirm="typeChange"
			:list="orderTypeList"></u-select>

		<u-calendar v-model="showTimeVisible" mode="range" @change="getDateValue"></u-calendar>
	</view>
</template>


<script>
	import {
		apiOrderTypeLists,
		apiOrderSaleDetailReport
	} from '@/api/order'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'OrderList',
		mixins: [MescrollMixin],

		data() {
			return {
				reportList: [],
				formModel: {
					order_type_admin: '',
					start_time: '',
					start_desc: '开始时间',
					end_time: '',
					end_desc: '结束时间',
				},
				time: {
					value: 'month',
					desc: '本月',
				},
				showVisible: false,
				showTimeVisible: false,
				orderTypeList: [{
					label: '全部',
					children: [],
					pid: 0,
					value: ''
				}],
				type_desc: '订单类型',
				showTypeVisible: false,
				extend: {
					goods_num: 0,
					total_price: 0
				}
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiOrderSaleDetailReport({
					...this.formModel,
					range_type: this.time.value,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.reportList = []
					this.reportList = [...this.reportList, ...lists]
					this.extend = extend
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			resetPopup() {
				this.formModel = {
					order_type_admin: '',
					start_time: '',
					start_desc: '开始时间',
					end_time: '',
					end_desc: '结束时间',
				}
			},
			closePopup() {
				this.showVisible = false
				this.$nextTick(() => {
					this.resetPopup()
				})
			},
			chooseTime() {
				this.showVisible = true
			},
			queryTime(value, desc) {
				this.time.desc = desc
				this.time.value = value
				if (value != 'diy') {
					this.refreshOrderData()
				}
				this.closePopup()
			},
			getDateValue(e) {
				console.log(e)
				this.formModel.start_time = e.startDate
				this.formModel.start_desc = e.startDate
				this.formModel.end_time = e.endDate
				this.formModel.end_desc = e.endDate
				this.refreshOrderData()
			},
			getOrderType() {
				apiOrderTypeLists().then((data) => {
					var data = data.order_type_lists
					data.forEach((item, idx) => {
						this.orderTypeList.push({
							label: item,
							children: [],
							pid: 0,
							value: idx
						})
					})
				});
			},
			chooseType() {
				this.showTypeVisible = true
			},
			typeChange(row) {
				this.type_desc = row[0].label == '全部' ? '订单类型' : row[0].label
				this.formModel.order_type_admin = row[0].value
				console.log(row)
			},
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)

			this.refreshOrderData()
			this.getOrderType()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.query-line {
			padding: 20rpx 40rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;
		}

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			padding: 20rpx 0;
			border-bottom: $-solid-border;
		}

		&-main {
			padding: 20rpx 0;

			.box {
				text-align: center;

				.num {
					color: rgba(64, 115, 250, 1);
					font-size: 40rpx;
					font-weight: bold;
				}

				.desc {
					color: rgba(128, 128, 128, 1);
					font-size: 26rpx;
				}
			}
		}
	}

	.time {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.time-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}

	.functions {
		position: relative;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 0 36rpx env(safe-area-inset-bottom) 36rpx;

		.btn-add {
			position: absolute;
			right: 50rpx;
			bottom: 80rpx;
		}
	}
</style>